<template>
	<view class="content">
		<view class='topblock' :style="{backgroundImage:'url('+imgurl+'personalcenterbg.png'+')'}">
			<pagehead :title="title" :isback='isback' :titlecolor='titlecolor'></pagehead>
			<view class='userinfo'>
				<view class='headerimg'>
					<image :src="imgurl+'headerimg.jpg'"></image>
				</view>
				<view class='username'>
					孤狼
				</view>
			</view>
			<view class="bigblock">
				<view class='bigcircle' :style="{maskImage:'url('+imgurl+'blackbg.svg'+')'}">
					<view class='bigcirclebox'></view>
				</view>
				<view>
				</view>
				<view class='circles'>
					<view class='circlesbox' :style="{transform:'rotate('+xuanzhuan+'deg)'}">
						<view class='circle' v-for="(item,index) in leverlist" :key="'lerve'+index"
							:style="{transform:'rotate('+(index*12)+'deg)'}">
							<view class='circlebox'>
								<view class='quan'>
									<text>{{item.lever}}</text>
									<image :src="imgurl+'smallquan.png'"></image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration" @transition='test' :current='current' @animationfinish='test2'
				:previous-margin='previous' :next-margin='next'>
				<swiper-item>
					<personalswiper></personalswiper>
				</swiper-item>
				<swiper-item>
					<personalswiper></personalswiper>
				</swiper-item>
				<swiper-item>
					<personalswiper></personalswiper>
				</swiper-item>
				<swiper-item>
					<personalswiper></personalswiper>
				</swiper-item>
			</swiper>
			<view class='buttons'>
				<view class='buttonone'>
					<text>晋升攻略</text>
					<image :src="imgurl+'totop.png'"></image>
				</view>
				<view class='buttontwo'>
					<text>提现</text>
				</view>
			</view>
			<view class='statistics'>
				<view class='statistic'>
					<view class='number'>12.5</view>
					<view class='tip'>今日收益</view>
				</view>
				<view class='statistic'>
					<view class='number'>12.5</view>
					<view class='tip'>今日收益</view>
				</view>
				<view class='statistic'>
					<view class='number'>12.5</view>
					<view class='tip'>今日收益</view>
				</view>
			</view>
		</view>
		<view class='bottomblock'>
			<view class='iconlist'>
				<iconbox v-for='(item,index) in iconlist' :key="'iconlist'+index" :title='item.title'
					:iconsrc='item.iconsrc' :textcolor='item.textcolor'></iconbox>
			</view>
		</view>
		<!-- 	<div class="masked" /> -->
	</view>
</template>

<script>
	export default {

		data() {
			return {
				imgurl: getApp().globalData.imgurl,
				// 页面标题
				title: '个人中心',
				isback: false,
				titlecolor: 'white',
				background: ['color1', 'color2', 'color3'],
				indicatorDots: false,
				autoplay: false,
				interval: 2000,
				duration: 500,
				xuanzhuan: 0,
				current: 0,
				previous: '24rpx',
				next: "24rpx",
				// 常规操作
				iconlist: [{
						title: '对账单',
						iconsrc: getApp().globalData.imgurl+'personicon1.png',
						textcolor: '#000'
					},
					{
						title: '投递明细',
						iconsrc: getApp().globalData.imgurl+'personicon2.png',
						textcolor: '#000'
					},
					{
						title: '设备管理',
						iconsrc: getApp().globalData.imgurl+'personicon3.png',
						textcolor: '#000'
					},
					{
						title: '设备管理',
						iconsrc:  getApp().globalData.imgurl+'personicon4.png',
						textcolor: '#000'
					},
					{
						title: '设备管理',
						iconsrc:  getApp().globalData.imgurl+'personicon5.png',
						textcolor: '#000'
					},
					{
						title: '设备管理',
						iconsrc: getApp().globalData.imgurl+'personicon6.png',
						textcolor: '#000'
					},
				],
				// 等级数组
				leverlist: [{
						lever: 'V1'
					},
					{
						lever: 'V2'
					},
					{
						lever: 'V3'
					},
					{
						lever: 'V4'
					}
				]
			}
		},
		onLoad() {

		},
		methods: {

			durationChange(e) {
				this.duration = e.target.value
			},
			test(e) {
				let numsum = this.current * -12
				let num = Math.floor(e.detail.dx)
				let xuanzhuan = numsum - (12 / 375) * num
				this.xuanzhuan = xuanzhuan.toFixed(4);
				console.log(this.xuanzhuan)
			},
			test2(e) {
				console.log(e.detail.current)
				this.current = e.detail.current
				this.xuanzhuan = -12 * e.detail.current
			}
		}
	}
</script>

<style lang='less' scoped>
	.content {
		.topblock {
			width: 100vw;
			padding-bottom: 40rpx;
			background-size: 100% 100%;

			.userinfo {
				width: 100%;
				display: flex;
				margin-top: 45rpx;

				.headerimg {
					padding: 10rpx;
					border-radius: 50%;
					background-color: rgba(255, 255, 255, .2);
					margin-left: 32rpx;

					image {
						display: block;
						width: 114rpx;
						height: 114rpx;
						border-radius: 50%;
					}
				}

				.username {
					margin-left: 30rpx;
					line-height: 134rpx;
					color: #fff;
					font-size: 38rpx;
				}
			}

			.bigblock {
				width: 750rpx;
				height: 150rpx;
				position: relative;
				overflow: hidden;

				.bigcircle {
					background: linear-gradient(rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 2.5%);
					width: 2500rpx;
					height: 2500rpx;
					mask-size: 882rpx 86rpx;
					mask-position: 50% 0rpx;
					mask-repeat: no-repeat;
					mask-clip: padding-box;
					position: absolute;
					left: 50%;
					top: 50rpx;
					transform: translateX(-50%);
				}

				.circles {
					width: 2500rpx;
					height: 2500rpx;
					position: absolute;
					left: 50%;
					top: 50rpx;
					transform: translateX(-50%);

					.circlesbox {
						width: 2500rpx;
						height: 2500rpx;
						position: relative;
						transform: rotate(0deg);
						transform-origin: 1250rpx 1250rpx;

						.circle {
							width: 2500rpx;
							height: 2500rpx;
							position: absolute;
							left: 0rpx;
							top: 0rpx;

							.circlebox {
								width: 2500rpx;
								height: 2500rpx;
								position: relative;

								.quan {

									position: absolute;
									left: 50%;
									top: -60rpx;
									border-radius: 50%;
									transform: translateX(-50%);

									text {
										display: block;
										color: #fff;
									}

									image {
										width: 30rpx;
										height: 30rpx;
										display: block;
										margin-top: 9rpx;
									}
								}
							}

						}
					}

				}
			}



			.buttons {
				line-height: 66rpx;
				text-align: center;
				font-size: 38rpx;
				width: 668rpx;
				margin: 0px auto;
				display: flex;
				justify-content: space-between;
				box-sizing: border-box;
				padding: 0rpx 0rpx;
				position: relative;
				top: -30rpx;

				.buttonone {
					background-color: #fff;
					color: #666476;
					width: 232rpx;
					box-sizing: border-box;
					border-radius: 25rpx;
					position: relative;

					image {
						position: absolute;
						width: 34rpx;
						height: 33rpx;
						right: -5rpx;
						bottom: -5rpx;
					}
				}

				.buttontwo {
					background-color: #60ADFF;
					color: #fff;
					width: 232rpx;
					box-sizing: border-box;
					border-radius: 25rpx;
				}
			}

			.statistics {
				text-align: center;
				display: flex;
				justify-content: space-between;
				width: 668rpx;
				margin: 0px auto;

				.statistic {
					.number {
						color: #fff;
						font-size: 46rpx;
					}

					.tip {
						color: #FFFFFF;
						font-size: 24rpx;
					}
				}
			}
		}

		.bottomblock {
			border-top-left-radius: 30rpx;
			border-top-right-radius: 30rpx;
			overflow: hidden;
			position: relative;
			background-color: #fff;
			padding-bottom: 60rpx;
			top: -20rpx;

			.iconlist {
				width: 650rpx;
				margin: 0px auto;
				margin-top: 20rpx;
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;


				.iconbox {
					width: 30%;
				}
			}
		}
	}

	.swiper {
		height: 300rpx;
		position: relative;
		top: -50rpx;
	}
</style>
